<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/algorithms' }">
        算法管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>算法配置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">{{ headline }}</div>
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="算法名称" prop="name">
          <el-input v-model="editForm.name" auto-complete="off" placeholder="算法名称" readonly></el-input>
        </el-form-item>
        <el-form-item label="算法类型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择">
            <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label" disabled>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="算法可执行文件">
          <el-tag prop="exec">{{ editForm.exec }}</el-tag>
        </el-form-item>
        <el-form-item label="调用参数" prop="args">
          <el-input type="textarea" v-model="editForm.args" :rows="3"
            placeholder="例:调用示例:python ndvi.py --input landsat8.tif --output ndvi.tif"></el-input>
        </el-form-item>
        <el-form-item label="运行环境描述" prop="describe">
          <el-input type="textarea" v-model="editForm.describe" :rows="3"
            placeholder="例:该程序依赖pythongdal以及matplotlib等库环境才能跑起来" readonly></el-input>
        </el-form-item>
        <el-form-item label="调用说明" prop="callExplain">
          <el-input type="textarea" v-model="editForm.callExplain" :rows="3"
            placeholder="例:说明:程序需要传入多波段landsat8的影像数据，数据必须是多波段因为ndvi计算需要用45波段" readonly></el-input>
        </el-form-item>

        <div class="dialog-footer">
          <el-button type="primary" :loading="loading" class="accomplish" @click="updateSave('editForm')">
            保存
          </el-button>
        </div>
      </el-form>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false, //是显示加载
        headline: "算法新增",
        options: [
          {
            value: 1,
            label: "单因子分析",
          },
          {
            value: 2,
            label: "多因子分析",
          },
          {
            value: 3,
            label: "综合评价",
          },
        ],
        editForm: {
          id: "",
          name: "",
          type: "单因子分析",
          args: "",
        },

        // rules表单验证
        rules: {
          name: [{ required: true, message: "请输入算法名称", trigger: "blur" }],
          type: [
            { required: true, message: "请选择算法类型", trigger: "blur" },
          ],
          args: [
            { required: true, message: "请填写调用参数", trigger: "blur" },
          ],

        },

      };
    },
    /**
     * 创建完毕
     */

    created() {
      let data = this.$route.query.row;
      if (data) {
        this.headline = "算法配置";
        this.loading = true;
        this.editForm = data;
        this.editForm.type = "单因子分析";
        if (data.name == "water") {
          this.editForm.type = "多因子分析";
        }
        if (data.name == "route" || data.name == "station") {
          this.editForm.type = "综合评价";
        }
        this.editForm.args =
          "调用示例：python ndvi.py --input landsat8.tif --output ndvi.tif";
        this.editForm.describe =
          "程序需要传入多波段landsat8的影像数据，数据必须是多波段因为ndvi计算需要用45波段。坐标都是wgs84，归一化不做要求。";
        this.editForm.callExplain =
          "该程序依赖pythongdal以及matplotlib等库环境才能跑起来";
        this.loading = false;
      }
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      updateSave(editRow) {
        this.$refs[editRow].validate((valid) => {
          if (valid) {
            console.log("xxx", this.editForm);
            let params = this.editForm;
            this.loading = true;
            this.$axios
              .post("/algs/info/" + this.editForm.id + "/", {
                type: this.editForm.type,
                args: this.editForm.args,
              })
              .then((res) => {
                this.loading = false;
                this.$router.push({ path: "/algorithms" });
              })
              .catch((err) => {
                this.loading = false;
                this.$message.error("算法配置更新失败，请稍后再试！");
              });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .userRole {
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeclass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }

  .tableStyle {
    margin-top: 20px;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
</style>